<template>
	<div class="setAvatar" v-if="avatarList.length>0">
    <!-- 头部 -->
    <div class="nav_top d-flex jc-between ai-center bg-white">
      <div> 
        <el-button type="text" @click="$router.push('/user/userSetting')">
          <div class="iconfont icon-back ml-1 fs-xxxl text-dark"></div>
        </el-button>
      </div>
      <div class="fs-xxl text-dark pr-3">
        选择头像
      </div>
      <div></div>
    </div>

    <div class="avatar d-flex jc-between flex-wrap px-3 py-3">
      <div class="px-3 py-3" v-for="(item,i) in avatarList" :key="i" style="width: 33%" @click="use(item)">
        <van-image :src="item" style="width: 6rem; height: 6rem; border-radius: 50%">

        </van-image>
      </div>
    </div>


  </div>
</template>

<script>
  import { Toast } from "mint-ui";
  export default {
    data() {
     return {
      avatarList: [],
    }
  },
  methods: {
   async use(url){
    const res = await this.$http.post(`user/updateHeadPic.do`,{headPic: url})
    if (res.data.code != 0) {
                this.$router.push('/user/userSetting')
                this.$store.commit('updateUserInfo',url)
                Toast('修改成功')
              }else{
                Toast(res.data.message)
              }
            },
            async getAvatar(){
              const res = await this.$http.get(`user/getHeadPicList.do`)
              if (res.data.code != 0) {
                this.avatarList = res.data
              }else{
                Toast(res.data.message)
              }
            },

          },
          created(){
           this.getAvatar();
         },

       }
     </script>

     <style lang="scss" scoped>
     .el-button {
      width: 100%;

    }

  </style>